<template>
  <div>
    <h1>组件通讯 - 帅峰黑店</h1>
    <!-- 
      在app.vue中 使用了 用了 myProduct组件
      谁用了谁 谁就是父被用的就是子
      所以 
      谁是父？ App是父 
      谁是子？myProduct是子

      父传子步骤
      1. 给子组件（myproduct）加属性 
      2. 在子组件接受props属性
      3. 接受好的props可以在模板里使用，使用的方式和data一样
          获取值 this.xxx和data一样
    -->
    <my-product title="口水鸡" price="500" desc="超级好吃"></my-product>
    <my-product title="螺蛳粉" price="200" desc="非常臭很美滋滋"></my-product>
    <my-product title="水果盒子" price="100" desc="包甜"></my-product>
  </div>
</template>

<script>
/**
 * 1. 创建组件
 * 2. 引入组件
 * 3. 局部注册
 *      components 配置对象 键值对
 * 4. 使用组件
 */
import MyProduct from "./components/MyProduct.vue";
export default {
  components: {
    MyProduct: MyProduct,
  },
};
</script>

<style>
</style>